<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8/>
  <title>A simple map</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  <script src='https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet'/>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
<!--地图容器-->
<div id='map'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoieXE1ODU4NTg4IiwiYSI6ImNqejBsdzRrZTAwZWMzanBmY25xeG90ZXIifQ.E9jAeFHc-omSrBTe8ns5ew';
    var mapStyle = {
        "version": 8,
        "name": "Dark",
        "sources": {
            "mapbox": {
                "type": "vector",
                "url": "mapbox://mapbox.mapbox-streets-v8"
            },
            "overlay": {
                "type": "image",
                "url": "http://tp5.com/static/images/map.png",
                "coordinates": [
                    [-80.425, 46.437],
                    [-71.516, 46.437],
                    [-71.516, 37.936],
                    [-80.425, 37.936]
                ]
            }
        },
        "sprite": "mapbox://sprites/mapbox/dark-v10",
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        "layers": [
            {
                "id": "background",
                "type": "background",
                "paint": {"background-color": "#111"}
            },
            {
                "id": "water",
                "source": "mapbox",
                "source-layer": "water",
                "type": "fill",
                "paint": {"fill-color": "#2c2c2c"}
            },
            {
                "id": "boundaries",
                "source": "mapbox",
                "source-layer": "admin",
                "type": "line",
                "paint": {"line-color": "#797979", "line-dasharray": [2, 2, 6, 2]},
                "filter": ["all", ["==", "maritime", 0]]
            },
            {
                "id": "overlay",
                "source": "overlay",
                "type": "raster",
                "paint": {"raster-opacity": 0.85}
            },
            {
                "id": "cities",
                "source": "mapbox",
                "source-layer": "place_label",
                "type": "symbol",
                "layout": {
                    "text-field": "{name_en}",
                    "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
                    "text-size": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        4, 9,
                        6, 12
                    ]
                },
                "paint": {
                    "text-color": "#969696",
                    "text-halo-width": 2,
                    "text-halo-color": "rgba(0, 0, 0, 0.85)"
                }
            },
            {
                "id": "states",
                "source": "mapbox",
                "source-layer": "place_label",
                "type": "symbol",
                "layout": {
                    "text-transform": "uppercase",
                    "text-field": "{name_en}",
                    "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
                    "text-letter-spacing": 0.15,
                    "text-max-width": 7,
                    "text-size": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        4, 10,
                        6, 14
                    ]
                },
                "filter": ["==", ["get", "class"], "state"],
                "paint": {
                    "text-color": "#969696",
                    "text-halo-width": 2,
                    "text-halo-color": "rgba(0, 0, 0, 0.85)"
                }
            }
        ]
    };
    var map = new mapboxgl.Map({
        container: 'map',
        maxZoom: 5.99,
        minZoom: 4,
        zoom: 5,
        center: [-75.789, 41.874],
        style: mapStyle
    });
    map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>